<%@ page import="com.city.config.BaiduMap" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="com.city.config.BaiduMap" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/static/webjars/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
    <script type="text/javascript" src="/static/base/index/js/jquery-1.8.0.min.js"></script>
    <title>实有房屋统计</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=BaiduMap.BAIDU_AK%>"></script>

</head>
<body>
<div style="height: 100%;width:100%">
    <div class="layui-inline layui-col-md12">
        <input class="layui-input" name="id" id="demoReload" style="float:left;" autocomplete="off" placeholder="输入关键字">
        <button class="layui-btn" id="searchId" data-type="reload">搜索</button>
    </div>



    <div id="result" style="padding-right: 5px;" class="layui-col-lg3 layui-col-xs12  layui-col-md3" lay-data="id:'idTest'" >
        <table class="layui-table" id="leftTable">

        </table>
    </div>
    <div class="layui-col-lg9 layui-col-xs12 layui-col-md9">
        <div id="cityMap" style="height: 100%;border: 1px solid #ddd;border-radius: 5px;margin-top: 25px;box-shadow: darkgray 10px 10px 30px 5px;" >
        </div>
    </div>
</div>



<script src="/static/webjars/layui/layui.js" charset="utf-8"></script>
</body>
</html>


<script>
    var id = new Array();
    var cityname = new Array();
    var dataCount = new Array();
    var dataItem = new Array();
    var autorun = 0;
    var lastautorun = -1;
    var chartes = new Array();
    var timeControll;

    var table = layui.table;

    $.get("/getHouseinfo",{},function(data){
        refreshAll(data);
        }
    );
    //刷新所有数据
    function refreshAll(data){
        id = new Array();
        cityname = new Array();
        dataCount = new Array();
        dataItem = new Array();
        autorun = 0;
        lastautorun = -1;
        chartes = new Array();
        for(var i = 0;i < data.length;i++){
            id.push(data[i].id);
            cityname.push(data[i].townName);

            var temp = new Array();
            temp.push(data[i].lastSum);
            temp.push(data[i].nowSum);
            dataCount.push(temp);
        }
        pid = 0;
        findAllTownPos();

        for(var i = 0;i < cityname.length;i++){
            var oneitem = {
                "id":id[i],
                "area":cityname[i],
                "score":dataCount[i][1]
            }
            dataItem.push(oneitem);
        }

        //左侧表格部分
        layui.use('table', function(){
            table = layui.table;
            table.render({
                elem: '.layui-table'
                ,height:500
                ,cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 40, sort: true}
                    , {field: 'area', title: '地区',minWidth:80, align: 'center'}
                    , {field: 'score', title: '实有房屋记录', minWidth:100,align: 'center'}
                ]]
                , data: dataItem,
                even: true,
                page:true
                ,limit: 10//每页默认显示的数量,
                //,height:'full-200',
                ,id:'testReload'
            });

        });

        //jq设定点击事件。（点击一行跳转）
        function refreshtable() {
            var mylist = $('.layui-table');
            mylist.click(function(event){
                var tag = 0;
                var str = $(event.target).closest("tr")[0].outerHTML;
                var str2 = "";
                //对获取到的HTML代码去除标签，保留值
                for(var i = 0;i < str.length;i++) {
                    if (str[i] == '<') {
                        tag++;
                    } else if (str[i] == '>') {
                        tag--;
                    } else {
                        if (tag == 0)
                            str2 += str[i];
                    }
                }
                //去除数字和空格得到地区名称。用于传递到后台。后台依据该值为详细页面提供信息。
                str2 = str2.replace(/\d+/g,'');
                str2 = str2.trim();
                //alert(str2);
                if(str2.indexOf("地区") < 0)
                    window.location.href="/house/houseCountDetail?city=" + str2;
            });
        }
        setTimeout(refreshtable,1000);

        setTimeout(fun,1000);
        //echarts图表显示。
        function fun() {


            for(var i = 0;i < cityname.length;i++ ){
                var chart = echarts.init(document.getElementById("tst" + i));
                var option = {
                    tooltip: {text:cityname[i]},
                    xAxis: {
                        data: ["去年", "今年"]
                    },
                    yAxis: {},
                    series: [{
                        name: '拥有房屋数量',
                        type: 'bar',
                        data: dataCount[i],
                        color:function(param){
                            var colorlist = ['#903','#06c'];
                            return colorlist[param.dataIndex];
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        }
                    }]
                };

                chart.setOption(option);
                chartes.push(chart);
                //chart.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex:1});
            }


            //自动循环显示

            timeControll = setInterval(function runItSelf(){
                $(("#father" + autorun)).css("zIndex",100);
                if(lastautorun == -1){
                    chartes[autorun].dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex:1});
                }else{
                    $(("#father" + lastautorun)).css("zIndex",5);
                    chartes[lastautorun].dispatchAction({type: 'hideTip', seriesIndex: 0, dataIndex:1});
                    chartes[autorun].dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex:1});
                }
                lastautorun = autorun;
                autorun++;
                if(autorun == chartes.length - 1){
                    autorun = 0;
                }

            },4000);

        }
    }

    $('#searchId').click(function(){
       var KeyString = $('#demoReload').val();
       if(KeyString != ""){
           //TODO:发送请求，参数为关键字，返回结果，刷新数据
           $.get("/getHouseinfoByKey",{KeyString:KeyString},function(data){
               mp = new BMap.Map("cityMap",{minZoom:10,maxZoom:13});          // 创建地图实例,限定缩放范围。
               point = new BMap.Point(105.233464,28.303541);  // 创建点坐标
               mp.centerAndZoom(point, 12);
               marker = new BMap.Marker(point);  // 创建标注
               mp.addOverlay(marker);               // 将标注添加到地图中
               // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
               mp.enableScrollWheelZoom();
               clearInterval(timeControll);
               for(var i = 0;i < chartes.length;i++)
                   chartes[i].dispatchAction({type: 'hideTip', seriesIndex: 0, dataIndex:1});
               $("#result").empty();
               $("#result").append("<table class=\"layui-table\" id=\"leftTable\"></table>");
               refreshAll(data);
           });
       }else{
           $.get("/getHouseinfo",{},function(data){
                    clearInterval(timeControll);
                   refreshAll(data);
               }
           );
       }
    });





    //////////////定位视角到兴文县///////////////////
  var mp = new BMap.Map("cityMap",{minZoom:10,maxZoom:13});          // 创建地图实例,限定缩放范围。
  var point = new BMap.Point(105.233464,28.303541);  // 创建点坐标
  mp.centerAndZoom(point, 12);
  var marker = new BMap.Marker(point);  // 创建标注
  mp.addOverlay(marker);               // 将标注添加到地图中
 // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  mp.enableScrollWheelZoom();



////////////////查找所有的镇坐标，并记录标记///////////////
    function findAllTownPos() {
        var index = 0;
        var addsPoint = new Array();//对应的城镇的坐标
        var myGeo = new BMap.Geocoder();
        for (var i = 0; i < cityname.length; i++)
            bdGEO();

        function bdGEO() {
            var add = cityname[index];
            geocodeSearch(add);
            index++;
        }

        var placeid = 0; //城镇id
        function geocodeSearch(add) {
            myGeo.getPoint(add, function (point) {
                if (point) {
                    placeid++;
                    var address = new BMap.Point(point.lng, point.lat);
                    addsPoint.push(new BMap.Point(point.lng, point.lat));
                    addMarker(address, add);

                }
            }, "兴文县");
        }

        // 编写自定义函数,创建标注
        function addMarker(point, label) {
            var marker = new BMap.Marker(point);
            mp.addOverlay(new ComplexCustomOverlay(point, label));
            marker.setLabel(label);
        }

        ///////////图表//////////////////

        var pid = 0;
        // 复杂的自定义覆盖物
        function ComplexCustomOverlay(point, text) {
            this._point = point;
            this._text = text;
            pid++;
        }
        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function (map) {
            this._map = map;
            //父层div
            var div = this._div = document.createElement("div");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = "#fff";
            div.style.border = "1px solid rgba(128,128,128,0.6)";
            div.style.color = "black";
            div.style.height = "58px";
            div.style.padding = "2px";
            div.style.lineHeight = "18px";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "12px";
            div.id = "father" + cityname.indexOf(this._text);
            //标题部分
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            span.appendChild(document.createTextNode(this._text));
            span.alt = this._text;  //信息暂存在每个标签的alt属性中方便获取
            span.onclick = function () {
                window.location.href = '/house/houseCountDetail?city=' + span.alt;
            }
            var that = this;

            var arrow = this._arrow = document.createElement("div");

            arrow.style.position = "absolute";
            arrow.style.width = "11px";
            arrow.style.height = "10px";
            arrow.style.top = "22px";
            arrow.style.left = "10px";
            arrow.style.overflow = "hidden";
            div.appendChild(arrow);

            //显示图表部分div
            var dig = document.createElement("div");
            dig.style.width = "40px";
            dig.style.height = "40px";
            dig.id = "tst" + cityname.indexOf(this._text);
            div.appendChild(dig);


            mp.getPanes().labelPane.appendChild(div);

            div.onmouseover = function () {
                div.style.zIndex = 100;
                clearInterval(timeControll);
                for(var i = 0;i < chartes.length;i++)
                    chartes[i].dispatchAction({type: 'hideTip', seriesIndex: 0, dataIndex:1});
            }
            div.onmouseout = function () {
                div.style.zIndex = 5;
                //循环显示数据动画
                timeControll = setInterval(function runItSelf(){
                    $(("#father" + autorun )).css("zIndex",100);
                    if(lastautorun == -1){
                        chartes[autorun].dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex:1});
                    }else{
                        $(("#father" + lastautorun )).css("zIndex",5);
                        chartes[lastautorun].dispatchAction({type: 'hideTip', seriesIndex: 0, dataIndex:1});
                        chartes[autorun].dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex:1});
                    }
                    lastautorun = autorun;
                    autorun++;
                    if(autorun == chartes.length - 1){
                        autorun = 0;
                    }

                },4000);

            }
            div.onclick = function () {
                window.location.href = '/house/houseCountDetail?city=' + span.alt;
            }

            return div;
        }
        ComplexCustomOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 30 + "px";
        }
    }



</script>


